<script lang="ts" setup>
import { toRefs } from 'vue';
import { DialogResult } from '../../common/enums';
import { MessageValueToEdit } from '../../common/types';
import helpler from '../../common/helpler';
import { ElNotification } from 'element-plus';
// import TextAreaTagVue from '../../components/TextAreaTag.vue';

const props = defineProps<{ data: MessageValueToEdit }>();
const emits = defineEmits(['close']);
// const data = ref(props.data);
const { data } = toRefs(props);

const save = () => {
    try {
        data.value.valueString = data.value.valueString?.trim() as string | null;
        data.value.value = helpler.parseStringToValue(data.value.valueString, data.value.format);
        emits('close', DialogResult.Ok);
    }
    catch (err) {
        ElNotification.error((err as any).toString());
        console.error(err);
    }
};
const cancel = () => {
    emits('close', DialogResult.Cancel);
};

</script>
<template>
    <el-container>
        <el-header class="app-toolbar-3">
            <el-button type="primary" @click="save">Save</el-button>
            <el-button @click="cancel">Cancel</el-button>
        </el-header>
        <el-main style="padding:10px">
            <table class="app-table-1">
                <tbody>
                    <tr>
                        <th>Name</th>
                        <td colspan="3"><el-input v-model="data.name" style="width:300px" autocomplete="off"></el-input>
                        </td>
                    </tr>
                    <tr>
                        <th>Desc</th>
                        <td colspan="3"><el-input v-model="data.desc" style="width:300px"></el-input></td>
                    </tr>
                    <tr>
                        <th>
                            Format
                        </th>
                        <td>
                            <el-select v-model="data.format" style="width:120px" filterable>
                                <el-option label="List" value="List"></el-option>
                                <el-option label="Binary" value="Binary"></el-option>
                                <el-option label="Boolean" value="Boolean"></el-option>
                                <el-option label="AscII" value="AscII"></el-option>
                                <el-option label="Jis8" value="Jis8"></el-option>
                                <el-option label="I8" value="I8"></el-option>
                                <el-option label="I1" value="I1"></el-option>
                                <el-option label="I2" value="I2"></el-option>
                                <el-option label="I4" value="I4"></el-option>
                                <el-option label="F8" value="F8"></el-option>
                                <el-option label="F4" value="F4"></el-option>
                                <el-option label="U8" value="U8"></el-option>
                                <el-option label="U1" value="U1"></el-option>
                                <el-option label="U2" value="U2"></el-option>
                                <el-option label="U4" value="U4"></el-option>
                            </el-select>
                        </td>
                        <th>Len</th>
                        <td style="width:100px">

                        </td>
                    </tr>
                    <tr>
                        <th style="vertical-align: top;padding-top: 5px;">
                            Values
                        </th>
                        <td colspan="3">
                            <el-input v-model="data.valueString" type="textarea" :rows="5" resize="none" </el-input>
                        </td>
                    </tr>
                </tbody>
            </table>
        </el-main>
    </el-container>
</template>